<script>
import {getDelete, getTimeAdd, getTimeslot, getTimeUpdate} from "@/api/tool/scheduling/scheduling";
import moment from "moment";

export default ({
  name: "index",
  data() {
    return {
      arr: [],
      tableData: [],
      dialogVisible: false,
      edmitDialogVisible: false,
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      // 新增接口传参data
      list: {
        startTime: '',
        endTime: ''
      },
      //   更新时间段接口传参
      updateList: {
        id: Number,
        state: "",
        startTime: "",
        endTime: ""
      },
    //编辑
      startTime:'',
      ids:'',


    }
  },
  methods: {

    load() {
      // 获取时间段
      getTimeslot().then(res => {
        // console.log(res)
        this.tableData = res.rows
        this.tableData.forEach(item => {
          item.time = `${item.startTime}-${item.endTime}`

        })
      })
    },
    // 删除弹框
    open(row) {
      // console.log(row)
      this.$confirm('此操作将永久删除该时间段, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(this.tableData.indexOf(row))
        getDelete([row.id]).then(res => {
          // console.log(res)
          if (res.code === 200) {
            // console.log(this.tableData)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })

        this.load()

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //   新增时间段
    increase() {
      this.dialogVisible = true

    },
    // 确认添加
    add() {

      this.tableData.forEach(item => {
        this.list = {
          startTime: `${moment(this.value1[0]).format('HH:mm')}`,
          endTime: `${moment(this.value1[1]).format('HH:mm')}`,
        }
        // 新增时间段
        getTimeAdd(this.list).then(res => {
          // console.log(res)
          this.load()
        })

      })

      this.dialogVisible = false

    },
    // 编辑
    edit(row) {
      // console.log(row)
      this.ids = row.id
      this.status = row.status
      // console.log(row.startTime.substring(0,2))
      // console.log(row.startTime.substring(3))
      this.edmitDialogVisible = true
      this.value1 = [new Date(2016, 9, 10, row.startTime.substring(0,2), row.startTime.substring(3)), new Date(2016, 9, 10, row.endTime.substring(0,2), row.startTime.substring(3))]


    },
    // 编辑提交
    edmit() {
      this.edmitDialogVisible = false
      // console.log(this.value1)

      getTimeUpdate(
        {
          id:this.ids,
          state:this.status,
          startTime:`${moment(this.value1[0]).format('HH:mm')}`,
          endTime:`${moment(this.value1[1]).format('HH:mm')}`
        }
      ).then(res => {
        // console.log(res)
      })
      this.load()
    }

  },
  created() {
    this.load()
  },

})
</script>

<template>
  <div id="mainBox">
    <div>
      <el-row class="el-btn-add">
        <el-button type="primary" @click="increase">添加</el-button>


        <!--        添加时的对话框       -->
        <el-dialog
          title="添加时间段"
          :visible.sync="dialogVisible"
          width="30%">
          <span>选择时间段</span>
          <el-time-picker
            is-range
            v-model="value1"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消 </el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </span>
        </el-dialog>
      </el-row>
    </div>
    <div>
      <!--      主体表格区域表格    -->
      <el-table
        :data="tableData"
        border
        style="width: 1200.5px"
        class="el-table">
        <el-table-column
          fixed
          prop="time"
          label="日期"
          width="600">
        </el-table-column>
        <el-table-column
          label="操作"
          width="600">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="text">编辑</el-button>
            <el-button @click="open(scope.row)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    编辑对话框     -->
    <el-dialog
      title="编辑时间段"
      :visible.sync="edmitDialogVisible"
      width="30%">
      <span>编辑时间段</span>
      <el-time-picker
        is-range
        v-model="value1"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围">
      </el-time-picker>
      <span slot="footer" class="dialog-footer">
                <el-button @click="edmitDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="edmit">确 定</el-button>
              </span>
    </el-dialog>
  </div>

</template>

<style scoped lang="scss">
#mainBox {
  margin: 40px 20px;

  .el-btn-add {
    margin-bottom: 20px;
  }

  .el-table tr td {
    text-align: center;
  }

}

::v-deep .el-button--text {
  margin: 0 5px;
}

::v-deep .el-dialog__header {
  background-color: #1892ff;
  color: white;
  text-align: left;
}

::v-deep .el-dialog__body {
  text-align: left;
}

::v-deep .el-table th.el-table__cell > .cell {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}

::v-deep .el-dialog {
  width: 50% !important;
}

::v-deep .el-range-editor.el-input__inner {
  margin-left: 35px;
}

::v-deep .el-dialog__title {
  color: white;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: white;
}
</style>
